<template>
	<view class="">
		<!-- <nav-tab cname="fixedtop" ifsize="30" color="#FE9367" xhxjb="linear-gradient(to right, #fe9367, #FE9367)" v-model="aIdx" @changeTab="changeTab" :tabs="tabs"></nav-tab> -->
		<view class="sxmain">
			<view v-show="aIdx == 0" class="bf">
				<mg-input v-model="params1.name" isr="1" ht="门店名称" htc="c3 f30" pr="请输入门店名称" icn="t-r" />
				<mg-input :value="sjxx ? sjxx.id : ''" isr="1" ht="门店ID" htc="c3 f30" icn="cb t-r" dis="1" />
				<mg-cell cname="p332" isr="1">
					<template slot="bd">
						<view class="c3 f30">门店LOGO</view>
						<mg-photo
							:w="uploadArr1[0].w"
							:max="uploadArr1[0].max"
							:mark="uploadArr1[0].mark"
							:pkey="uploadArr1[0].pkey"
							:file-list="uploadArr1[0].fileList"
							@change-img="changeImg1"
							@startadd="startadd"
						/>
					</template>
					>
				</mg-cell>
				<mg-input v-model="params1.storeLinkMan" isr="1" ht="联系人" htc="c3 f30" pr="请输入联系人" icn="t-r" />
				<mg-input v-model="params1.storeTel" t="number" isr="1" ht="门店电话" htc="c3 f30" pr="请输入门店电话" icn="t-r" />
				<mg-input @tab="toggleTab('citys')" :value="params1.citys" isr="1" ht="所属区域" htc="c3 f30" pr="请选择" icn="t-r" dis="1" arrow="1" ftc=""></mg-input>
				<mg-input @tab="chooseLocation" v-model="params1.address" isr="1" ht="详细地址" htc="c3 f30" pr="" icn="t-r">
					<view slot="ft" class="p-5-15 iconfont icondt f40"></view>
				</mg-input>
				<mg-input :value="params1.lng + ',' + params1.lat" isr="1" ht="门店经纬度" htc="c3 f30" icn="cb t-r" dis="1" />
			</view>
			<!-- <view v-show="aIdx == 1" class="bf">
				<mg-input @tab="xzsj" :value="params2.time" isr="1" ht="营业时间" htc="c3 f30" pr="请选择" icn="t-r" arrow="1" dis="1"></mg-input>
				<mg-ta title="门店简介" th="100" max="50" v-model="params2.introduction"></mg-ta>
				<mg-input v-model="params2.mainDishes" isr="1" ht="主营菜品" htc="c3 f30" pr="请输入主营菜品" />
				<mg-input v-model="params2.perCapita" t="digit" isr="1" ht="人均消费" htc="f30" pr="请输入人均消费">
					<view slot="ft" class="t-r" :style="{ width: '80rpx' }">元</view>
				</mg-input>
				<mg-cell cname="p332" isr="1">
					<template slot="bd">
						<view class="c3 f30">商家环境</view>
						<mg-photo
							:w="uploadArr2[0].w"
							:max="uploadArr2[0].max"
							:mark="uploadArr2[0].mark"
							:pkey="uploadArr2[0].pkey"
							:file-list="uploadArr2[0].fileList"
							@change-img="changeImg2"
							@startadd="startadd"
						/>
					</template>
					>
				</mg-cell>
			</view> -->
			<!-- <view v-show="aIdx == 2" class="bf">
				<mg-cell cname="p332" isr="1">
					<template slot="bd">
						<view class="c3 f30">商品安全档案</view>
						<mg-photo
							:w="uploadArr3[0].w"
							:max="uploadArr3[0].max"
							:mark="uploadArr3[0].mark"
							:pkey="uploadArr3[0].pkey"
							:file-list="uploadArr3[0].fileList"
							@change-img="changeImg3"
							@startadd="startadd"
						/>
					</template>
					>
				</mg-cell>
				<mg-cell cname="p332" isr="1">
					<template slot="bd">
						<view class="c3 f30">营业执照</view>
						<mg-photo
							:w="uploadArr3[1].w"
							:max="uploadArr3[1].max"
							:mark="uploadArr3[1].mark"
							:pkey="uploadArr3[1].pkey"
							:file-list="uploadArr3[1].fileList"
							@change-img="changeImg3"
							@startadd="startadd"
						/>
					</template>
					>
				</mg-cell>
			</view> -->
		</view>
		<view class="foot-btnc p-r" style="padding-top: 100rpx;">
			<button @click="save" :disabled="loading" :loading="loading" class="foot-btn" :style="{ background: tColor }">保存</button>
		</view>
		<w-picker v-if="citys.length" mode="linkage" :level="3" @confirm="onConfirm($event, 'citys')" ref="citys" :linkList="citys"></w-picker>
		<mg-load v-if="showloading" type="2"></mg-load>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import navTab from '@/components/common/functionCmp/nav-tab.vue';
import steps from '@/components/third/steps.vue';
import mgCell from '@/components/common/mg-cell.vue';
import mgInput from '@/components/form/mg-input.vue';
import mgPhoto from '@/components/form/mg-photo.vue';
import mgLabel from '@/components/form/mg-label.vue';
import mgRadio from '@/components/form/mg-radio.vue';
import mgAgree from '@/components/form/mg-agree.vue';
import mgTa from '@/components/form/mg-ta.vue';
import wPicker from '@/components/form/w-picker.vue';
import utils from '@/common/utils.js';
import { uploadImg } from '@/common/wechat-util.js';
import { utilMixins } from '@/common/util-mixins.js';
export default {
	name: 'my-add-info',
	components: {
		navTab,
		steps,
		mgCell,
		mgInput,
		mgPhoto,
		mgLabel,
		mgRadio,
		mgAgree,
		mgTa,
		wPicker
	},
	data() {
		return {
			showloading: true,
			aIdx: 0,
			tabs: [
				{
					name: '基本信息'
				},
				// {
				// 	name: '营业信息'
				// },
				// {
				// 	name: '资质认证'
				// }
			],
			loading: false,
			uploadArr1: [
				{
					mark: '0',
					pkey: 'icon',
					max: '1',
					fileList: [],
					uploadList: []
				}
			],
			uploadArr2: [
				{
					mark: '0',
					pkey: 'environment',
					max: '9',
					fileList: [],
					uploadList: []
				}
			],
			uploadArr3: [
				{
					mark: '0',
					pkey: 'foodRecords',
					max: '6',
					fileList: [],
					uploadList: []
				},
				{
					mark: '1',
					pkey: 'license',
					max: '3',
					fileList: [],
					uploadList: []
				}
			],
			params1: {
				name: '',
				icon: [],
				storeLinkMan: '',
				storeTel: '',
				citys: '',
				cityArr: [],
				address: '',
				lat: '',
				lng: ''
			},
			params2: {
				time: '',
				timeType: '',
				timeArr: [],
				mainDishes: '',
				perCapita: '',
				introduction: '',
				environment: []
			},
			params3: {
				foodRecords: [],
				license: []
			}
		};
	},
	async onLoad(options) {
		this.util.setNT('门店信息');
		await this.getConfig({
			key: 'citys',
			api: 'cssj'
		});
		this.lastAidx = this.aIdx;
		this.csh(this.aIdx);
	},
	mixins: [utilMixins],
	computed: {
		...mapState({
			sjxx: state => state.sjxx,
			citys: state => state.config.citys.sArr
		})
	},
	methods: {
		...mapActions(['getConfig']),
		csh(i) {
			this.showloading = true;
			if (i == 0) {
				this.util
					.request({
						url: this.api.bcmdxx
					})
					.then(res => {
						for (let k in this.params1) {
							// if (k == 'icon') {
							// 	this.params1[k] = res.data[k].split(',')
							// } else {
							// 	this.params1[k] = res.data[k]
							// }
							this.params1[k] = res.data[k];
						}
						try {
							let f = this.citys.find(v => v.value == res.data.cityArr[0]),
								s = f.children.find(v => v.value == res.data.cityArr[1]),
								t = s.children.find(v => v.value == res.data.cityArr[2]);
							this.params1.citys = [f.label, s.label, t.label].join('-');
						} catch (e) {}
						this.uploadArr1[0].fileList = res.data.icon?res.data.icon.split(','):[];
						this.showloading = false;
						// console.log(this.params1)
					});
			} 
			// else if (i == 1) {
			// 	this.util
			// 		.request({
			// 			url: this.api.bcmdyyxx
			// 		})
			// 		.then(res => {
			// 			for (let k in this.params2) {
			// 				this.params2[k] = res.data[k];
			// 			}
			// 			if (res.data.timeType == 1) {
			// 				this.params2.time = '24小时营业';
			// 			} else if (res.data.timeArr) {
			// 				this.params2.time = res.data.timeArr
			// 					.map(v => {
			// 						return `${v.startTime}-${v.ciri ? '次日' : ''}${v.endTime}`;
			// 					})
			// 					.toString();
			// 			}
			// 			this.uploadArr2[0].fileList = res.data.environment;
			// 			this.showloading = false;
			// 		});
			// } 
			// else if (i == 2) {
			// 	this.util
			// 		.request({
			// 			url: this.api.bcmdzzxx
			// 		})
			// 		.then(res => {
			// 			this.uploadArr3[0].fileList = res.data.info.foodRecords;
			// 			this.uploadArr3[1].fileList = res.data.info.license;
			// 			this.showloading = false;
			// 		});
			// }
		},
		changeTab(e) {
			if (this.lastAidx == e) return;
			this.lastAidx = this.aIdx;
			this.csh(e);
		},
		toggleTab(str) {
			this.$refs[str].show();
		},
		onConfirm(e, key) {
			switch (key) {
				case 'citys':
					this.params1[key] = e.checkArr.join('-');
					this.params1.cityArr = e.checkValue;
					break;
			}
			// console.log(e)
		},
		startadd(e) {
			this.isstartadd = e;
			// console.log('startadd', e)
		},
		changeImg1(e) {
			// console.log(e)
			this.uploadArr1[e.mark].uploadList = this.params1[e.pkey] = e.p;
		},
		changeImg2(e) {
			this.uploadArr2[e.mark].uploadList = this.params2[e.pkey] = e.p;
		},
		changeImg3(e) {
			this.uploadArr3[e.mark].uploadList = this.params3[e.pkey] = e.p;
		},
		chooseLocation() {
			uni.chooseLocation({
				success: res => {
					this.params1.address = res.address + res.name;
					this.params1.lat = res.latitude;
					this.params1.lng = res.longitude;
					console.log(res);
				}
			});
		},
		//选择标签
		labelChange(e) {
			// let j = {}
			// e.map(v => {
			// 	j[v.id] = v.name
			// })
			let j = e.map(v => v.name);
			this.params.service = j;
		},
		tcsm() {
			uni.setStorageSync('fwb', this.meal.body);
			this.go({
				t: 1,
				url: `/yb_o2o/my/other/gywm?t=${this.meal.name}&p=9`
			});
			console.log(this.meal);
		},
		//
		radioChange(e) {
			this.getType();
		},
		getType() {
			let i = this.tcArr.find(v => v.id == this.params.mealId);
			this.meal = i;
		},
		xzsj() {
			uni.setStorageSync('yysd', this.params2.timeArr);
			this.go({
				t: 1,
				url: 'yysj?t=1&r=' + this.params2.timeType
			});
		},
		getTime(e) {
			this.params2.timeType = e.radio;
			this.params2.time = e.time;
			this.params2.timeArr = e.times;
			// console.log(e)
		},
		async save() {
			for (let i in this[`params${this.aIdx + 1}`]) {
				console.log(`%c ${i} `, 'color: white; background-color: #07c160', this[`params${this.aIdx + 1}`][i]);
			}
			if (this.isstartadd) return;
			if (this.aIdx == 0) {
				let filterArr = [];
				let judgeData = utils.isFailParams({
					field: this.params1,
					filter: filterArr,
					tips: {
						name: '输入商家名称',
						icon: '上传商家logo',
						storeLinkMan: '输入联系人',
						storeTel: '输入门店电话',
						citys: '选择城市',
						cityArr: [],
						address: '选择地址',
						lat: '',
						lng: ''
					}
				});
				if (!judgeData) {
					return;
				} else {
					this.loading = true;
					this.util.showLoading('图片上传中');
					Promise.all(
						this.uploadArr1.map(item => {
							return uploadImg({
								files: item.uploadList
							});
						})
					).then(async fres => {
						let params = utils.deepCopy(this.params1);
						params.icon = fres[0].toString();
						// console.log(fres, params)
						// return
						try {
							let res = await this.util.request({
								url: this.api.bcmdxx,
								method: 'POST',
								ct: 1,
								mask: 1,
								data: params
							});
							if (res) {
								this.util.message('保存成功', 1, 900);
								utils.stfn(() => {
									this.csh(0);
									this.loading = false;
								});
							}
						} catch (e) {
							this.loading = false;
						}
					});
				}
			} else if (this.aIdx == 1) {
				let filterArr = ['time', 'timeArr', 'perCapita', 'mainDishes', 'introduction', 'environment'];
				let judgeData = utils.isFailParams({
					field: this.params2,
					filter: filterArr,
					tips: {
						timeType: '请设置营业时间'
					}
				});
				if (!judgeData) {
					return;
				} else {
					if (this.params2.timeType == 2 && (!this.params2.timeArr || !this.params2.timeArr.length)) {
						return this.util.message('请设置营业时间', 3);
					}
					this.loading = true;
					this.util.showLoading('图片上传中');
					Promise.all(
						this.uploadArr2.map(item => {
							return uploadImg({
								files: item.uploadList
							});
						})
					).then(async fres => {
						let params = utils.deepCopy(this.params2);
						params.environment = fres[0];
						try {
							let res = await this.util.request({
								url: this.api.bcmdyyxx,
								method: 'POST',
								ct: 1,
								mask: 1,
								data: params
							});
							if (res) {
								this.util.message('保存成功', 1, 900);
								utils.stfn(() => {
									this.csh(1);
									this.loading = false;
								});
							}
						} catch (e) {
							this.loading = false;
						}
					});
				}
			} else if (this.aIdx == 2) {
				let filterArr = ['foodRecords', 'license'];
				let judgeData = utils.isFailParams({
					field: this.params3,
					filter: filterArr,
					tips: {
						foodRecords: ''
					}
				});
				if (!judgeData) {
					return;
				} else {
					this.loading = true;
					this.util.showLoading('图片上传中');
					Promise.all(
						this.uploadArr3.map(item => {
							return uploadImg({
								files: item.uploadList
							});
						})
					).then(async fres => {
						let params = utils.deepCopy(this.params3);
						params.foodRecords = fres[0];
						params.license = fres[1];
						try {
							let res = await this.util.request({
								url: this.api.bcmdzzxx,
								method: 'POST',
								ct: 1,
								mask: 1,
								data: params
							});
							if (res) {
								this.util.message('保存成功', 1, 900);
								utils.stfn(() => {
									this.csh(2);
									this.loading = false;
								});
							}
						} catch (e) {
							this.loading = false;
						}
					});
				}
			}
		}
	}
};
</script>

<style scoped lang="scss">
// .sxmain {
// 	padding-top: 121rpx;
// }
</style>
